<template>
  <view class="container">
    <u-popup :show="show" @close="handelClose" :round="10" mode="right">
      <view class="sub-wrapper">
        <view class="close" @click="handelClose">
          <text>收款</text>
          <image src="/static/imgs/close.png" mode=""></image>
        </view>
        <view class="" style="flex: 1; overflow: hidden;">
          <scroll-view scroll-y="true" style="height: 100%">
            <view class="sub-detail">
              <view class="discount-con">
                <text class="discount-tit">选择优惠</text>
                <view class="discount-item">
                  <text class="tit">优惠券（0）</text>
                  <view class="coupon-list">
                    <view class="coupon-item" v-for="(coupon, index) in couponList" :key="index"
                       :class="{ 'selected': selectedCoupons[coupon.type] === index }"  @click="handleCoupon(coupon, index)">
                      <image  v-if="selectedCoupons[coupon.type] === index" src="/static/imgs/check-red.png" class="check-icon"
                        alt="选中标记" />
                      <view class="coupon-left">
                        <text class="coupon-amount"><text>¥</text>{{ coupon.amount }}</text>
                        <text class="coupon-condition">{{ coupon.condition }}</text>
                      </view>
                      <view class="coupon-middle"></view>
                      <view class="coupon-right">
                        <text class="coupon-title">{{ coupon.title }}</text>
                        <text class="coupon-time">{{ coupon.timeRange }}</text>
                      </view>
                    </view>
                  </view>

                   <view class="empty-box" style="text-align: center;">
                  <image src="/static/imgs/discount.png" mode="widthFix" style="width: 66px;"></image>
                  <view class="text1" style="font-weight: 400;font-size: 12px;color: #999999;">暂无优惠券</view>
                </view>
                </view>
                <view class="discount-item">
                  <text class="tit">营销活动（{{marketingList.length}}）</text>
                  <view class="marketing-list">
                    <view class="marketing-option" v-for="(item,index) in marketingList" :key="index"
                      :class="{ 'selected': activedMarketing==index}" @click="handleMarke(index)">
                      <image v-if="activedMarketing==index" src="/static/imgs/check-icon.png" class="check-icon"
                        alt="选中标记" />
                      <text>{{item}}</text>
                    </view>
                  </view>
                  <view class="empty-box" style="text-align: center;">
                  <image src="/src/static/imgs/discount.png" mode="widthFix" style="width: 66px;"></image>
                  <view class="text1" style="font-weight: 400;font-size: 12px;color: #999999;">暂无活动</view>
                </view>
                </view>
              </view>
              <view class="discount-con">
                <text class="discount-tit">支付方式</text>
                <view class="pay-list">
                  <view class="payment-option" :class="{ 'selected': selected === 'wechat' }"
                    @click="selected = 'wechat'">
                    <image v-if="selected === 'wechat'" src="/static/imgs/check-icon.png" class="check-icon"
                      alt="选中标记" />
                    <view class="option-content">
                      <image src="/static/imgs/wechat.png" class="payment-icon" alt="微信支付图标" />
                      <text class="payment-text">微信支付</text>
                    </view>
                  </view>

                  <!-- 支付宝选项 -->
                  <!-- <view class="payment-option" :class="{ 'selected': selected === 'alipay' }"
                    @click="selected = 'alipay'">
                    <image v-if="selected === 'alipay'" src="/static/imgs/check-icon.png" class="check-icon"
                      alt="选中标记" />
                    <view class="option-content">
                      <image src="/static/imgs/alipay.png" class="payment-icon" alt="支付宝图标" />
                      <text class="payment-text">支付宝</text>
                    </view>
                  </view> -->

                  <!-- 现金支付选项 -->
                  <view class="payment-option" :class="{ 'selected': selected === 'cash' }" @click="selected = 'cash'">
                    <image v-if="selected === 'cash'" src="/static/imgs/check-icon.png" class="check-icon" alt="选中标记" />
                    <view class="option-content">
                      <image src="/static/imgs/cash.png" class="payment-icon" alt="现金支付图标" />
                      <text class="payment-text">现金支付</text>
                    </view>
                  </view>
                </view>
              </view>

            </view>
          </scroll-view>
        </view>
        <view class="bottom-bar">
          <view class="selected-number">
            账目明细
          </view>
          <view class="total-info">
            <view class="total-left">
              <view class="total-price">
                商品原价：<text class="total-text">
                  ￥{{totalPrice}}</text>
              </view>
              <view class="total-price">
                优惠合计：<text class="total-text">
                  ￥0</text>
              </view>
              <view class="total-price">
                实付金额：<text class="total-text">
                  ￥{{totalPrice}}</text>
              </view>
            </view>
            <view class="total-right">
              <button class="buy-btn" @click="handleBuyNow">确认收款</button>
            </view>
          </view>
        </view>
      </view>


    </u-popup>
  </view>
</template>

<script setup>
  import {
    ref,
    nextTick,
    computed,
    onMounted,
    watch,
    defineEmits
  } from 'vue'
  import {
    getBySpuId,
    addCartFun
  } from '@/requests/apis/takeOrder'
  const quantity = ref(1)
  const current = ref(0)
  const emit = defineEmits(['closesubPopup', 'sureHarvest'])
  const props = defineProps({
    productId: String,
    showPopup: Boolean,
    spuId: String,
    type: {
      type: String,
      default: 'goods',
    },
    totalPrices: Number
  })
  let show = ref(props.showPopup)
  let spuId = ref(props.spuId)
  let paddType = ref(props.type)
  let totalPrice = ref(props.totalPrices)
  let detailForm = ref()
  let selected = ref('wechat');
  let activedMarketing = ref(0)
  let activedCoupon = ref(0)
  let marketingList = ref([
    // '满100减10', '订单8折'
    ])
  let couponList = ref([
    // {
    //   amount: 13.00,
    //   condition: '满100元可用',
    //   title: '满10-3元券全场饮品通用券',
    //   timeRange: '2025-07-09 ~ 2025-07-20',
    //   type: "立减券"
    // },
    // {
    //   amount: 3.00,
    //   condition: '满10元可用',
    //   title: '饮品专属券',
    //   timeRange: '2025-07-09 ~ 2025-07-20',
    //   type: "满减券"
    // },
    // {
    //   amount: 5.00,
    //   condition: '满30元可用',
    //   title: '零食类满减券',
    //   timeRange: '2025-07-09 ~ 2025-07-20',
    //   type: "立减券"
    // },
    // {
    //   amount: 20.00,
    //   condition: '满199元可用',
    //   title: '百货满减券',
    //   timeRange: '2025-07-09 ~ 2025-07-20',
    //   type: "满减券"
    // }
  ]);
  const selectedCoupons = ref({
    "立减券": null,
    "满减券": null
  });
  const handelClose = () => {
    show.value = false;
    emit('closesubPopup')
  }
  // 选择营销活动
  const handleMarke = (index) => {
    activedMarketing.value = index
  }
const handleCoupon = (coupon, index) => {
  const { type } = coupon;
  // 如果点击的是当前类型已选中的项，则取消选中
  if (selectedCoupons.value[type] === index) {
    selectedCoupons.value[type] = null;
  } else {
    // 否则选中当前项（自动替换同类型之前的选中项）
    selectedCoupons.value[type] = index;
  }
};
  const handleBuyNow = () => {
    show.value = false;
    emit('sureHarvest', selected.value)
  }
  // 页面初始化时读取本地存储并设置选中状态
  onMounted(async () => {

  });
</script>

<style lang="scss">
  .sub-wrapper {
    width: 80vw;
    background: linear-gradient(180deg, #E3F8FF 0%, #FFFFFF 100%);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .close {
      box-sizing: border-box;
      padding: 0 21px;
      height: 48px;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(151, 151, 151, 0.16);

      image {
        width: 14px;
        height: 14px;
      }
    }

    .sub-detail {
      padding: 17px 21px;
      box-sizing: border-box;

      .discount-con {
        .discount-tit {
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          margin-bottom: 14px;
          display: block;
        }

        .discount-item {
          margin-bottom: 20px;

          .tit {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            margin-left: 8px;
            display: block;
            margin-bottom: 10px;
          }

          .coupon-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 15px;

            .coupon-item.selected {
              background: #FFF5F3;
              box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
              border: 1px solid #FF5030;
            }

            .coupon-item {
              display: flex;
              align-items: center;
              background-color: #fff;
              border-radius: 8px;
              // border: 1px solid transparent;
              overflow: hidden;
              width: calc(50% - 10px);
              position: relative;

              .check-icon {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 0;
                right: 0;
              }

              .coupon-left {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 88px;

                .coupon-amount {
                  font-size: 24px;
                  font-weight: 600;
                  color: #FF5030;

                  text {
                    font-size: 14px;
                  }
                }

                .coupon-condition {
                  font-weight: 400;
                  font-size: 12px;
                  color: #666666;
                  line-height: 20px;
                  margin-top: 4px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
              }

              .coupon-middle {
                height: 80px;
                border-left: 1px dashed rgba(0, 0, 0, 0.12);
                position: relative;
              }

              .coupon-middle::before {
                content: '';
                position: absolute;
                top: -8px;
                left: -8px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background-color: #f0f9ff;
              }

              .coupon-middle::after {
                content: '';
                position: absolute;
                bottom: -8px;
                left: -8px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background-color: #f0f9ff;
              }

              .coupon-right {
                padding: 12px;
                display: flex;
                flex-direction: column;
                margin-top: 8px;

                .coupon-title {
                  font-weight: 500;
                  font-size: 14px;
                  color: #FF5030;
                  line-height: 20px;
                  margin-bottom: 7px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }

                .coupon-time {
                  font-weight: 400;
                  font-size: 12px;
                  color: #666666;
                  line-height: 22px;
                }
              }
            }
          }



          .marketing-list {
            display: flex;
            gap: 10px;

            .marketing-option {
              padding: 7px 22px;
              box-sizing: border-box;
              background: rgba(255, 255, 255, 0.98);
              border-radius: 6px;
              border: 1px solid #D4D4D4;
              font-weight: 400;
              font-size: 12px;
              color: #333333;
              position: relative;

              .check-icon {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 0;
                right: 0;
              }
            }

            .marketing-option.selected {
              background: rgba(15, 144, 253, 0.1);
              border: none;
              font-weight: 500;
              font-size: 12px;
              color: #0F90FD;
            }
          }
        }

        .pay-list {
          display: flex;

          .payment-option {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid #D4D4D4;
            margin-right: 10px;
            position: relative;
          }

          .payment-option.selected {
            background: rgba(15, 144, 253, 0.1);
            border: none;
          }

          .option-content {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .payment-icon {
            width: 26px;
            height: 26px;
            margin-bottom: 7px;
          }

          .payment-text {
            font-weight: 500;
            font-size: 12px;
            color: #333333;
            line-height: 17px;
          }

          .check-icon {
            width: 16px;
            height: 16px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }


    .bottom-bar {
      padding: 16px 20px 29px;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(27, 27, 27, 0.16);
      border-radius: 0px 0px 10px 10px;
      border-top: 1px solid #D8D8D8;
      backdrop-filter: blur(8.8235294117647px);


      .selected-number {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }



      .total-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .total-left {
          display: flex;
        }

        .total-price {
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          margin-right: 24px;

          .total-text {
            font-weight: 400;
            font-size: 14px;
            color: #FF5030;
          }
        }

        .buy-btn {
          flex: 1;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
          height: 36px;
          line-height: 36px;
          background: #0F90FD;
          border-radius: 20px;

          &::after {
            border: none;
          }
        }
      }
    }

    .btn-wrapper {
      display: flex;
    }


  }
</style>
